<template>
    <div class="pdfcoment">
        <p class="arrow">
            <!-- 上一页 -->
            <span @click="changePdfPage(0)" class="currentPage" :class="{ grey: currentPage == 1 }">上一页&nbsp;&nbsp;</span>
            <span style="color: #8c8e92;">{{ currentPage }} / {{ pageCount }}</span>
            <!-- 下一页 -->
            <span @click="changePdfPage(1)" class="currentPage"
                :class="{ grey: currentPage == pageCount }">&nbsp;&nbsp;下一页</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <button @click="printFun" style="color:#fff" >打印</button>

            <span style="float :right;padding-right:40px;font-size: 20px;color: #FFFFFF;cursor: pointer;" @click="close"><i
                    class="el-icon-close"></i></span>
        </p>
        <!-- loadPdfHandler：加载事件 src：需要展示的PDF地址；currentPage：当前展示的PDF页码；pageCount=$event：PDF文件总页码；currentPage=$event：一开始加载的页面-->
        <el-main id="myIframe" ref="myIframe" class="conterScroll scroll" :style="istype=='1'?'height:690px':' height: 770px'">
            <pdf ref="pdf" :src="url" :page="currentPage" @num-pages="pageCount = $event"
                @page-loaded="currentPage = $event" @loaded="loadPdfHandler"></pdf>
        </el-main>
    </div>
</template>

<script>
import pdf from "vue-pdf";
export default {
    components: { pdf },
    props: ["url","istype","operate", 'source'],
    watch: {
        url: {
            handler(newVal) {
                // console.log(newVal,"+++")
                if(this.operate != 'supervise') {
                  this.setWatermarkContent("文档水印");
                  window.onresize = () => {
                    this.setWatermarkContent("文档水印");
                  };
                }
            },
            immediate: true
        }
    },
    data() {
        return {
            filesProps: {
                label: "originName"
            },
            pdfDialog: false,
            currentPage: 0, // pdf文件页码
            pageCount: 0, // pdf文件总页数
            fileType: "pdf",// 文件类型,
        };
    },
    created() {

    },
    mounted() {

    },
    methods: {
        // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
        changePdfPage(val) {
            if (val === 0 && this.currentPage > 1) {
                this.currentPage--;
            }
            if (val === 1 && this.currentPage < this.pageCount) {
                this.currentPage++;
            }
        },
        // pdf加载时
        loadPdfHandler() {
            this.currentPage = 1; // 加载的时候先加载第一页
        },
        handleOpen() {
            this.url = pdf.createLoadingTask({
                url: this.url,
                cMapUrl: '/cmaps/',
                cMapPacked: true
            })
            this.timer = new Date().getTime();
            this.currentPage = 0;
            this.pageCount = 0;
            this.pdfDialog = true;
        },
        //关闭弹框
        close() {
            this.$emit("printAlert");
            this.pdfDialog = false;
        },
        printFun() {
            this.$refs.pdf.print();
        },
        //获取水印
        setWatermarkContent(content) {
            let id = "1.23452384164.1223412415";
            // if (document.getElementById(id) !== null) {
            //     document.body.removeChild(document.getElementById(id));
            // }

            let ele = document.createElement("canvas");
            ele.width = 250;
            ele.height = 150;

            let getCanvas = ele.getContext("2d");
            getCanvas.rotate((-20 * Math.PI) / 180);
            getCanvas.font = "20px Vedana";
            getCanvas.fillStyle = "rgba(200, 200, 200, 0.35)";
            getCanvas.textAlign = "center";
            getCanvas.textBaseline = "Middle";
            getCanvas.fillText(content, ele.width / 6, ele.height / 2);
            // getCanvas.fillText(content2, ele.width / 6, (ele.height + 40) / 2)

            let div = document.createElement("div");
            div.id = id;
            div.style.pointerEvents = "none";
            div.style.top = "120px";
            if(this.operate == 'online') {
              div.style.left = "41%";
            } else {
              div.style.left = "50%";
            }
            div.style.position = "fixed";
            console.log(this.istype,"++++")
            console.log(this.source)
            if(this.source == 'bianyan') {
              div.style.marginLeft = "-14%";
              div.style.width = 25 + "%";
            } else {
              if (this.istype == 1) {
                div.style.marginLeft = "14%";
                div.style.width = 20 + "%";
              } else {
                div.style.marginLeft = "-14%";
                div.style.width = 50 + "%";
              }
            }

            div.style.zIndex = "100000";
            //div.style.width = document.documentElement.clientWidth + "px";
            div.style.height = document.documentElement.clientHeight + "px";
            div.style.background =
                "url(" + ele.toDataURL("image/png") + ") left top repeat";
                setTimeout(function(res){
                    document.getElementById("myIframe").appendChild(div);
                },300)

            return id;
        },


    }
};
</script>

<style>
.conterScroll {
    overflow-y: scroll;

}

.pdfcoment {
    width: 100%;
    height: 100%;
    position: relative;
    /* background: red; */
}

.currentPage {
    cursor: pointer;
    color: #8c8e92;
}

.currentPage:hover {
    color: #2761ff;
}



.el-dialog__body {
    color: #606266;
    font-size: 14px;
    padding: 0;
}

.my-pdf-modal {
    min-height: 95% !important;
}

.arrow {
    /* position: fixed;
    top: 0px;
    left: 0px; */
    z-index: 2;
    width: 100%;
    background-color: #191919;
    padding: 12px 0;
    margin: 0;
    text-align: center;
}
</style>
